table.nom-table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  background-color: var(--nom-grid-background-color);
  border-spacing: 0;

  &.nom-table-striped {
    tbody tr:nth-child(even):not(.nom-tr-empty) {
      td {
        &.nom-table-fixed-left,
        &.nom-table-fixed-right {
          background: var(--nom-grid-tr-striped-bg);
        }
      }

      background-color: var(--nom-grid-tr-striped-bg);

      &:hover {
        background-color: var(--nom-grid-tr-striped-bg-hover);

        .nom-table-fixed-left,
        .nom-table-fixed-right {
          background-color: var(--nom-grid-tr-striped-bg-hover);
        }
      }

      &.nom-tr-selected {
        background-color: var(--nom-grid-tr-bg-selected);

        .nom-table-fixed-left,
        .nom-table-fixed-right {
          background-color: var(--nom-grid-tr-bg-selected);
        }
      }
    }
  }

  tbody tr:not(.nom-tr-empty) {
    &:hover {
      background-color: var(--nom-grid-tr-bg-hover);

      .nom-table-fixed-left,
      .nom-table-fixed-right {
        background-color: var(--nom-grid-tr-bg-hover);
      }
    }

    &.nom-tr-selected,
    &.nom-tr-selected:hover {
      background-color: var(--nom-grid-tr-bg-selected);

      .nom-table-fixed-left,
      .nom-table-fixed-right {
        background-color: var(--nom-grid-tr-bg-selected);
      }
    }
  }

  .nom-table-th-hover-mask {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--nom-grid-col-highlight-bg);
  }

  td,
  th {
    position: relative;
    padding: var(--nom-grid-td-padding);
    word-break: break-all;
    &[align='left'] {
      text-align: left;
    }
    &[align='center'] {
      text-align: center;
    }
    &[align='right'] {
      text-align: right;
    }

    &.nom-table-fixed-left,
    &.nom-table-fixed-right {
      position: sticky;
      z-index: 2;
      background: var(--nom-grid-background-color);
    }

    &.nom-table-sortable {
      > span,
      > .nom-icon {
        cursor: pointer;
      }
    }

    &.nom-table-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: keep-all;

      .nom-table-cell-content {
        .nom-table-cell-title {
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: keep-all;
        }

        // table配置了ellipsis, 则td中的Ellipsis组件的多行省略则不生效
        .nom-ellipsis .nom-ellipsis-inner {
          display: table-cell;
        }
      }
    }

    .nom-table-resize-handler {
      position: absolute !important;
      right: 0;
      bottom: 0;
      width: 6px;
      height: 100%;
      border-right: 1px dotted var(--nom-grid-icon-color);
      visibility: hidden;
      cursor: col-resize;
    }

    .nom-table-sort-handler.p-type-sort {
      visibility: hidden;
    }

    .nom-table-filter-handler {
      visibility: hidden;

      &.nom-filter-active {
        visibility: visible;
      }
    }

    .nom-table-pin-handler {
      color: var(--nom-grid-icon-color);
      visibility: hidden;
      cursor: pointer;

      &.p-type-pin-fill {
        visibility: visible;
      }
    }

    &:hover {
      .nom-table-resize-handler {
        visibility: visible;
      }

      .nom-table-pin-handler {
        visibility: visible;
      }

      .nom-table-sort-handler {
        visibility: visible;
      }

      .nom-table-filter-handler {
        visibility: visible;
      }
    }
  }

  .nom-table-ellipsis {
    // 内容使用content包了一层，在content中设置overflow: hidden
    &.nom-table-fixed-left,
    &.nom-table-fixed-right {
      .nom-table-cell-content {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &.nom-table-fixed-left-last,
    &.nom-table-fixed-right-first {
      overflow: visible;
    }
  }

  .nom-table-fixed-left-last::after {
    position: absolute;
    top: 0;
    right: -30px;
    bottom: 0;
    width: 30px;
    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }

  .nom-table-fixed-right-first {
    padding-left: 15px;
  }

  .nom-table-fixed-right-first::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px;
    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
    transform: translate(-100%);
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }

  th {
    position: relative;
    color: var(--nom-grid-th-color);
    font-weight: var(--nom-grid-th-font-weight);
    line-height: 24px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: var(--nom-grid-th-bg);
    background-image: var(--nom-grid-th-bg-image);
    // padding-right: 2rem;
    -webkit-user-select: none;
    user-select: none;

    &.nom-table-fixed-left,
    &.nom-table-fixed-right {
      position: sticky;
      z-index: 2;
      background-color: var(--nom-grid-th-bg);
      background-image: var(--nom-grid-th-bg-image);
    }

    > .nom-table-filter {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 100%;
      color: var(--nom-grid-icon-color);
    }

    &.nom-table-ellipsis {
      .nom-table-cell-content {
        display: flex !important;
      }
    }
  }

  .nom-tr-expand-indicator {
    margin-right: 6px;
  }

  .nom-td-tree-node:not(.nom-td-tree-node-leaf) {
    cursor: pointer;
  }

  &.p-line-row {
    td,
    th {
      border-bottom: 1px solid var(--nom-border-color);
    }
  }

  &.p-line-col {
    td,
    th {
      border-right: 1px solid var(--nom-border-color);
    }

    > th {
      &:last-child {
        border-right: 0;
      }
    }
  }

  &.p-line-both {
    td,
    th {
      border-right: 1px solid var(--nom-border-color);
      border-bottom: 1px solid var(--nom-border-color);
    }

    thead > tr {
      &:first-child {
        th:last-child {
          border-right: 0;
        }
      }
    }

    td {
      &:last-child {
        border-right: 0;
      }
    }
  }

  &.p-bordered {
    border: 1px solid var(--nom-border-color);
  }
}
